<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href = "<?php echo base_url(); ?>"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $detail['title']; ?></title>

<?php
	include 'public/views/header.php';
	include 'public/home/html/banner.php';
	include 'public/home/html/banner2.php';
	include 'public/home/html/lazy_load.php';
	// include 'public/home/html/bootstrap.php';
?>
<script src="public/home/js/article.js"></script>
<link rel="stylesheet" type="text/css" href="public/append/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 微信jssdk -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<style>
	body{
		max-width:400px;
		margin:auto;
		background-color: white;
		padding:0px!important;
		
	}
	/*.box{
		overflow:hidden;
		height:1200px;
	}*/
	*{
		padding:0px;
		margin:0px;
	}
	a{
		text-decoration:none;
		color:#fff; 
	}
	

	/*顶部，标题*/
	.head{
		width: 100%;
		height: 60px;
		background: #f2f2f2;
	}
	.head .col-xs-3,.head .col-xs-6{
		height:60px;
	}
	.head .col-xs-6{
		text-align: center;
	}
	.head .col-xs-3 img{
		height: 26px;
		width: 30px;
		margin-top: 17px;
	}
	.head .col-xs-6 img{
		height: 50px;
		width: auto;
		 margin-top: 5px;
	}

	/*banner*/
	.banner_single img{
		width:100%;
		height:260px;
	}
	
	.title{
		width:88%;
		margin-left:6%;
		margin-top: 20px;
	}
	.title-font{
		color: #a53942;
		font-weight:bold;
		font-size:16px;
	}
	.title-line{
		height: 3px;width:18px;background: #a53942;
	}


	.rich-text{
		width:96%;
		margin-left:2%;
		overflow-x: hidden;
		height:auto;
		background-color: white;
	}

	.pdf{
		width:96%;
		margin-left: 2%;
		padding-bottom:40px;
		margin-top: 20px;
	}
	.pdf-item{
		width:36%;
		margin-top:20px;
		margin-right: 0px;
		display: inline-block;
		height:210px;
		border-radius: 2px;
		box-shadow: 0px 0px 12px #999;
		overflow: hidden;
	}
	.pdf-item:nth-child(odd){
		margin-left:10.5%;
		margin-right: 3.5%;
	}
	.pdf-item:nth-child(even){
		margin-right:10%;
		margin-left: 2.5%;
	}

	.pdf-img{
		width:100%;
		height:160px;
	}
	.pdf-name{
		height:25px;
		line-height: 30px;
		text-align: center;
		font-size:12px;
		color:#848484;
		letter-spacing:1px;
	}
	.pdf-size{
		height:25px;
		line-height: 20px;
		text-align: center;
		font-size:12px;
		color:#848484;
	}
	.pdf-size img{
		height:15px;
		width:15px;
		position: relative;
		left:-5px;
		top:3px;
	}

	.production{
		width:87%;
		margin-left: 6.5%;
		padding-bottom:25px;
		position: relative;
	}
	.production-etype{
		height:40px;
		line-height: 37px;
		color:#4A84C6;
		/*position: relative;*/
		font-weight:bold;
		font-size: 19px;
	}
	.production-title-line{
		background-color:#4A84C6;
		width: 20px;
		height:2px; 
		position: absolute;
		top:30px;
	}
	.production-ctype{
		height:30px;
		line-height: 27px;
		color:#4A84C6;
		/*position: relative;*/
		font-weight:bold;
		font-size: 18px;
	}
	.production-item{
		width:45%;
		margin-top:25px;
		/*display: inline-block;*/
		height:154px;
		border-radius: 2px;
		-moz-box-shadow:0px 0px 6px #aaa;
		-webkit-box-shadow:0px 0px 6px #aaa; 
		box-shadow:0px 0px 6px #aaa;
		overflow: hidden;
		position: relative;
		float: left;
	}
	.production-item:nth-child(odd){
		margin-right: 4%;
		margin-left: 1%;
	}
	.production-item:nth-child(even){
		margin-left: 4%;
	}
	.production-img{
		height:90px;
		width:100%;
		overflow: hidden;
		text-align: center;
	}
	.production-img img{
		width:auto;
		height:100%;
		margin:auto;
	}
	.production-num{
		width:40%;
		height:30px;
		line-height:30px;
		text-align: left;
		text-indent: 10px;
		font-size:12px;
		font-weight:bold;
		float: left;
		overflow: hidden;
	}
	.production-collection{
		width:60%;
		height:30px;
		line-height:30px;
		text-align: right;
		font-size:7px;
		font-weight:bold;
		float: right;
		overflow: hidden;
	}
	.production-collection img{
		height:12px;
		width:15px;
		/*margin-bottom:-20px;*/
		position: relative;
		top:8px;
		margin-left: 7px;
		margin-right:10px;
	}
	.production-collection i{
		font-size:9px;
		margin-left:3px;
		margin-right:10px;
	}

	.production-line-1,.production-line-2,.production-line-3{
		width:100%;
		height:9px;
		line-height: 9px;
		font-size:7px;
		/*background-color: red;*/
		text-indent: 10px;
	}
	.production-line-2{
		color:#dd2727;
	}
	.production-item-mask{
		background:rgba(0,0,0,0.4);
		height:170px;
		width:100%;
		position: absolute;
		top:0px;
		line-height:170px;
		text-align: center;
	}
	.production-item-mask i{
		font-size: 30px;
		color:white;
		margin-top: 63px;
	}

	.production-item-more{
		display: none;
	}

	/*显示全部*/
	.show-total{
		height:50px;
		width:100%;
		background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
		text-align: center;
		line-height: 50px;
	}
	.show-total i{
		font-size: 20px;
		color:white;
		margin-top: 19px;
		cursor: pointer;
	}


	/*banner css重写*/
	.v-slideshow-dot{
		bottom:10px;
	}
	.v-slideshow-dot i{
		width:6px;
		height:6px;
		border-radius: 3px;
		margin:0px 3px;
		border:1px solid #ccc!important;
	}
	.v-slideshow-arrow{
		display: none;
	}
	.pdf-tip{
		font-size: 18px;
		color:#4A84C6;
		width:88%;
		margin-left: 6%;
		font-weight:bold;
	}
</style>
</head>

<body>
	<input type="hidden" id="park_id" value="<?php echo $park_id ?>"/>
	<div class="box">
	

	<!-- 轮播图 -->
	<?php if (count($banner[ArticleBannerType::First[XPHEnum::Value]])>0&&false): ?>
	<?php if (count($banner[ArticleBannerType::First[XPHEnum::Value]])==-1): ?>
	<div class="banner_single">
		<img src="<?php echo $banner[ArticleBannerType::First[XPHEnum::Value]][0]['path'] ?>" alt="" />
	</div>	
	<?php else: ?>
    <div class="banner">
        <div class="large_box">
            <ul>
            	<?php foreach ($banner[ArticleBannerType::First[XPHEnum::Value]] as $k => $v): ?>
                <li>
                    <img src="<?php echo $v['path'] ?>">
				</li>
                <?php endforeach ?>
            </ul>
        </div>
        <div class="small_box">
            <span class="btn left_btn"></span>
            <div class="small_list">
                <ul>
                	<?php foreach ($banner[ArticleBannerType::First[XPHEnum::Value]] as $k => $v): ?>
                    <li <?php echo $k==0?'class="on"':'' ?>>
                        <img src="<?php echo $v['thumb_path'] ?>" class="no-click-img no-show-img">
                        <div class="bun_bg"></div>
                    </li>
                    <?php endforeach ?>
                </ul>
            </div>
            <span class="btn right_btn"></span>
        </div>
    </div>
	<?php endif; ?>
    <div style="clear: both;"></div>	
    <div style="height:20px; width:100%;"></div>		
	<?php endif; ?>
	
	<!-- 轮播图2 -->
	<?php if (count($banner[ArticleBannerType::Second[XPHEnum::Value]])>0): ?>
	<div id="banner2" style="width:100%; height:170px;">
	    <vue-slideshow :data="images" :config="config"></vue-slideshow>
	</div>
	<div style="clear: both;"></div>	
    <div style="height:20px; width:100%;"></div>	
	<?php endif; ?>

	<!-- 富文本 -->
    <div class="rich-text">
    	<?php echo $detail['content'] ?>
    </div>
	

	

	<!-- pdf -->
	<?php if (count($pdf)>0): ?>
	<div class="pdf-tip">获取更多产品信息</br>可浏览下方PDF产品手册</br>或进入页面: 探索·发现→搜索产品</div>
	<div class="pdf">
		<?php foreach ($pdf as $k => $v): ?>
		<div class="pdf-item">
			<a href="<?php echo $v['link'] ?>">
				<img src="<?php echo $v['path'] ?>" data-src="<?php echo $v['path'] ?>" alt="" class="pdf-img no-click-img"/>
				<div class="pdf-name"><?php echo sub_str($v['name'],10) ?></div>
				<div class="pdf-size"><img src="public/home/images/watch.png" alt="" class="pdf-img no-click-img no-show-img"/><?php echo sub_str($v['size'],8) ?></div>
			</a>
		</div>	
		<?php endforeach ?>
	</div>	
	<?php endif; ?>
	</div>


	<!-- 显示全部 -->
	<!-- <div class="show-total">
		<i class="fa fa-angle-double-down" aria-hidden="true"></i>
	</div> -->

	<!-- index iframe -->
	<div class="zhezhao" style="position:fixed; z-index:999; background: rgba(0,0,0,0.5); display: none; top:0px; left:0px;"></div>
	<iframe class="index-iframe" src="<?php echo base_url() ?>Home/Index/Index?park_id=<?php echo $_GET['park_id'] ?>" frameborder="0" style="position: fixed; z-index:1000; top:0px;"></iframe>
</body>
<script>
	<?php 
		$images=array();
		foreach ($banner[ArticleBannerType::Second[XPHEnum::Value]] as $k => $v) {
			$images[]=array('src'=>$v['path'],'href'=>'javascript:void(0)');
		}
	?>
	<?php if (count($banner[ArticleBannerType::Second[XPHEnum::Value]])>0): ?>
	new Vue({
        el: "#banner2",
        data: {
            images:<?php echo json_encode($images) ?>,
            config: {
                effect: "slide",
                arrow: true,
                autoplay: 3000
            }
        }
    });
    <?php endif; ?>
    $(function(){
    	var startX=0;
    	var startY=0;
    	var moveEndX=0;
    	var moveEndY=0;
    	var X=0;
    	var Y=0;
    	$("#banner2").on("touchstart", function(e) {
    	    // 判断默认行为是否可以被禁用
    	    if (e.cancelable) {
    	        // 判断默认行为是否已经被禁用
    	        if (!e.defaultPrevented) {
    	            e.preventDefault();
    	        }
    	    }   
    	    startX = e.originalEvent.changedTouches[0].pageX,
    	    startY = e.originalEvent.changedTouches[0].pageY;
    	});
    	$("#banner2").on("touchend", function(e) {         
    	    // 判断默认行为是否可以被禁用
    	    if (e.cancelable) {
    	        // 判断默认行为是否已经被禁用
    	        if (!e.defaultPrevented) {
    	            e.preventDefault();
    	        }
    	    }               
    	    moveEndX = e.originalEvent.changedTouches[0].pageX,
    	    moveEndY = e.originalEvent.changedTouches[0].pageY,
    	    X = moveEndX - startX,
    	    Y = moveEndY - startY;
    	    //左滑
    	    if ( X > 0 ) {
    	        $('.v-slideshow-arrow i').eq(0).click();            
    	    }
    	    //右滑
    	    else if ( X < 0 ) {
    	        $('.v-slideshow-arrow i').eq(1).click(); 
    	    }
    	    //下滑
    	    else if ( Y > 0) {
    	        // alert('下滑');    
    	    }
    	    //上滑
    	    else if ( Y < 0 ) {
    	        // alert('上滑');    
    	    }
    	    //单击
    	    else{
    	        // alert('单击');    
    	    }
    	});

    	$('.index-iframe').css('left','-'+(Number($(window).width())*0.8)+'px').width(Number($(window).width())*0.8);
    	setWindow();
		$(window).resize(function(){
			setWindow();
		});
    	$('.show-index').click(function(){
    		$('.zhezhao').show();
    		$('.index-iframe').animate({left:'0px'});
    	});
    })

    function setWindow(){
    	$('.zhezhao').height($(window).height()).width($(window).width());
		$('.index-iframe').height($(window).height());
    }
</script> 
</html>